<template>
  <div class="container">
    <ul class="todoitams row aic">
      <li
        :key="key"
        class="row aic"
        v-for="(value, key) in todoItems"
      >
        <el-button
          @click="todo(key)"
          size="small"
        >
          {{
          $language.local(key)
          }}
        </el-button>
        <el-badge
          :hidden="value == 0"
          :value="value"
          class="item"
          type="danger"
        />
      </li>
    </ul>

    <el-row :gutter="16">
      <el-col :span="6">
        <el-card>
          <div class="row">
            <div class="col-1 icon">
              <i class="el-icon-user mr-1"></i>
            </div>
            <div class="card-body col-1">
              <div class="title">{{ $language.local("MerchantTotal") }}</div>
              <div class="num">{{ model.MerchantTotal }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="row">
            <div class="col-1 icon">
              <i class="iconfont icon-renminbi mr-1"></i>
            </div>
            <div class="card-body col-1">
              <div class="title">{{ $language.local("RechargeAmountTotal") }}</div>
              <div class="num">{{ model.RechargeAmountTotal }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="row">
            <div class="col-1 icon">
              <i class="iconfont icon-weixinzhifu1 mr-1 green"></i>
            </div>
            <div class="card-body col-1">
              <div class="title">{{ $language.local("PayAmountTotal") }}</div>
              <div class="num">{{ model.PayAmountTotal }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="row">
            <div class="col-1 icon">
              <i class="iconfont icon-yue mr-1"></i>
            </div>
            <div class="card-body col-1">
              <div class="title">{{ $language.local("ServiceAmountTotal") }}</div>
              <div class="num">{{ model.ServiceAmountTotal }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- #region 排行榜 -->
    <el-row
      :gutter="16"
      class="mt1"
      v-show="false"
    >
      <el-col :span="18">
        <el-card>
          <div id="main"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div
            class="clearfix card-header"
            slot="header"
          >
            <span>排行榜</span>
            <el-tooltip
              :enterable="false"
              class="item"
              content="查看详情"
              effect="dark"
              placement="top"
            >
              <i
                @click="onDetail"
                class="iconfont icon-prompt"
                style="float: right; padding: 3px 0; cursor: pointer"
              ></i>
            </el-tooltip>
          </div>
          <ol class="users">
            <li
              :key="index"
              class="row"
              v-for="(item, index) in salesman"
            >
              <el-badge
                :type="sortColor(index)"
                :value="index + 1"
                class="item col-1"
              ></el-badge>
              <!-- <el-avatar
                size="small"
                :src="userList[index].imageSrc"
              ></el-avatar>-->
              <div class="name jcsb col-8">
                <div>{{ item.real_name }}</div>
                <div>{{ item.RechargeAmount }}</div>
              </div>
            </li>
          </ol>
        </el-card>
      </el-col>
    </el-row>
    <!-- #endregion -->
  </div>
</template>

<script>
import userList from "./welcomeData";

export default {
  name: "Admin",
  data() {
    return {
      userList,
      titles: "",
      salesman: null,
      user: this.$store.getters.user,
      model: [],
      todoItems: {},
    };
  },
  created() {
    console.log(userList);
    this.getData();
  },
  mounted() {
    // this.titles = Array.from(this.performance, (v) => v.title);
  },
  methods: {
    async getData() {
      const month = new Date().format("yyyy年MM月");
      const response = await this.$http.get(
        `/api/statistics/charge?TradeYM=${month}`
      );
      console.log(response);
      this.model = response.data.Data;
      // this.salesman = response.data.Data.list.sort(
      //   (a, b) => b.RechargeAmount - a.RechargeAmount
      // );
      const response2 = await this.$http.get("/api/statistics/GetToDo");
      console.log(response2);
      this.todoItems = response2.data.Data;

      console.log(this.todoItems);
      this.initEcharts(this.model.accountrechargeex);
    },
    todo(key) {
      switch (key) {
        case "agentCheckNum":
          this.$router.push({
            path: "/agentlist",
          });
          break;
        case "empAuthNum":
          this.$router.push({
            path: "/employeeList",
          });
          break;
        case "invoiceCheckNum":
          this.$router.push({
            path: "/invoice_checklist",
          });
          break;
        case "merchantCheckNum":
          this.$router.push({
            path: "/merchantlist",
          });
          break;
        case "rechargeCheckNum":
          this.$router.push({
            path: "/recharge",
          });
          break;
        case "tskCheckNum":
          this.$router.push({
            path: "/ServiceProjectList",
          });
          break;

        default:
          break;
      }
    },
    initEcharts(dataList) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      let option;
      // option = {
      //   title: {
      //     text: "",
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //   },
      //   legend: {
      //     //  data: Array.from(this.performance, (v) => v.title),
      //     data: this.titles,
      //   },
      //   grid: {
      //     left: "3%",
      //     right: "4%",
      //     bottom: "3%",
      //     containLabel: true,
      //   },
      //   toolbox: {
      //     feature: {
      //       saveAsImage: {},
      //     },
      //   },
      //   xAxis: {
      //     type: "category",
      //     boundaryGap: false,
      //     data: ["一月", "二月", "三月", "四月", "五月", "六月"],
      //   },
      //   yAxis: {
      //     type: "value",
      //   },
      //   series: [
      //     {
      //       name: "代付金额",
      //       type: "line",
      //       stack: "总量",
      //       data: [120, 132, 101, 134, 90, 230, 210],
      //       smooth: true,
      //     },
      //     {
      //       name: "累积充值",
      //       type: "line",
      //       stack: "总量",
      //       data: [220, 182, 191, 234, 290, 330, 310],
      //       smooth: true,
      //     },
      //     {
      //       name: "新增客户",
      //       type: "line",
      //       smooth: true,

      //       stack: "总量",
      //       data: [150, 232, 201, 154, 190, 330, 410],
      //     },
      //     {
      //       name: "灵活灵工人数",
      //       smooth: true,
      //       type: "line",
      //       stack: "总量",
      //       data: [820, 932, 901, 934, 1290, 1330, 1320],
      //     },
      //   ],
      // };
      option = {
        title: {
          text: `${new Date().getMonth() + 1}月业绩情况`,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          // data: Array.from(this.salesman, (v) => v.real_name),
          data: Array.from(dataList, (v) => v.CustomerName),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            // data: Array.from(this.salesman, (v) => v.RechargeAmount),
            data: Array.from(dataList, (v) => v.AccountAmount),
            type: "bar",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    onDetail() {
      console.log("detail");
    },
    sortColor(index) {
      switch (index) {
        case 0:
          return "danger";
        case 1:
          return "success";
        case 2:
          return "warning";
        default:
          return "primary";
      }
    },
    getLocalTime() {
      return (/[\u4E00-\u9FA5]+/).exec(new Date().toLocaleString()).shift();
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  .todoitams {
    justify-content: flex-end;
    margin-bottom: 1rem;
    li {
      margin-left: 1.5rem;
      position: relative;
      .item {
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(50%, -38%);
      }
    }
  }
  .el-card {
    font-size: 0.75rem;
    .users {
      font-size: 1rem;
      li {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        // .el-avatar {
        //   margin-left: 10px;
        // }
        .name {
          margin-left: 10px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .header {
    display: flex;
    justify-content: space-between;
  }

  .card-body {
    font-weight: 400;
    font-size: 32px;
    margin: 10px 0;
    i {
      font-size: 32px;
    }
    &.red {
      color: red;
      i {
        color: red;
      }
    }
    &.green {
      color: green;
      i {
        color: green;
      }
    }
  }
  .card-footer {
    border-top: 1px solid #ddd;
    margin-top: 20px;
    padding-top: 10px;
    font-size: 0.75rem;
  }
  #main {
    width: 100%;
    height: 306px;
  }
}
.news {
  li {
    overflow: hidden;
    white-space: nowrap;
    line-height: 3rem;
    padding: 0 1rem;
    margin-bottom: 1em;
    cursor: pointer;
    text-overflow: ellipsis;
    border-bottom: 1px solid #f1f2f4;
    border-radius: 6px;
    &:hover {
      background-color: whitesmoke;
      color: #000;
    }
  }
}
.el-card {
  .row {
    display: flex;
    justify-content: space-between;
    .icon {
      display: flex;
      justify-content: center;
      i {
        font-size: 3.5rem;
      }
      .iconfont {
        &.green {
          color: green !important;
        }
      }
    }
    .card-body {
      .title {
        color: gray;
        font-size: 12px;
      }
      .num {
        margin-top: 1ex;
        font-size: 1.2rem;
      }
    }
  }
}
</style>
